<template>
    <div id="app">
        <el-scrollbar class="page-component__scroll" ref="componentScrollBar">
            <Headers/>
            <router-view class="router-view" />
            <!-- <Footers/> -->
            <transition name="back-top-fade">
                <div class="page-component-up" :class="{ 'hover': hover }" v-show="showBackToTop" @mouseenter="hover = true" @mouseleave="hover = false" @click="toTop">
                    <i class="el-icon-caret-top">返回顶部</i>
                </div>
            </transition>
        </el-scrollbar>
        <el-button @click="dialogFormVisible = true" class="search-btn fixed-btn" type="warning" icon="el-icon-search">询价器</el-button>
        <el-dialog title="询价器" :visible.sync="dialogFormVisible" center width="25%" @close="emptyForm">
            <el-form :model="form">
                <el-form-item label="股票代码" label-width="100px">
                    <el-input v-model.trim="form.code" auto-complete="off" placeholder="请输入股票代码"></el-input>
                </el-form-item>
                <el-form-item label="行权周期" label-width="100px">
                    <el-input v-model.trim="form.days" auto-complete="off" placeholder="请输入行权周期(单位:天)"></el-input>
                </el-form-item>
                <el-form-item label="权利金" label-width="100px">
                    <el-input v-model="datas" readonly disabled class="datas"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="danger" @click="emptyForm">清 空</el-button>
                <el-button type="primary" @click="getDatas">查 询</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Headers from '@/components/Headers'
import Footers from '@/components/Footers'
import jsonp from 'jsonp';
import throttle from 'throttle-debounce/throttle';
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                code: '',
                days: ''
            },
            formRegexp: {
                code: '请输入股票代码',
                days: '请输入行权周期'
            },
            datas: '',
            hover: false,
            showBackToTop: false,
            scrollTop: 0,
            showHeader: true,
            componentScrollBar: null,
            componentScrollBoxElement: null
        };
    },
    components: {
        Headers,
        Footers
    },
    watch: {
        '$route.path' () {
            // 触发伪滚动条更新
            this.componentScrollBox.scrollTop = 0;
            this.$nextTick(() => {
                this.componentScrollBar.update();
            });
        }
    },
    created: function() {},
    mounted() {
        this.componentScrollBar = this.$refs.componentScrollBar;
        this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
        this.throttledScrollHandler = throttle(300, this.handleScroll);
        this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
    },
    methods: {
        emptyForm: function() {
            this.form = {
                code: '',
                days: ''
            }
            this.datas = ''
        },
        getDatas: function() {
            for (var key in this.form) {
                if (this.form[key] == '') {
                    this.$message.error(this.formRegexp[key])
                    return;
                }
            }
            jsonp('http://118.31.165.32/api/Handler.ashx?code=' + this.form.code + '&days=' + this.form.days, null, (err, res) => {
                if (err) {
                    console.log(err)
                    this.$message.error(err.message)
                } else {
                    var sPrice = res.sPrice.replace(/\u0000/g, '');
                    var sCall = res.sCall.replace(/\u0000/g, '');
                    var s = sCall / sPrice * 100;
                    this.datas = s.toFixed(2) + '%';
                }
            })
        },
        toTop() {
            this.hover = false;
            this.showBackToTop = false;
            this.componentScrollBox.scrollTop = 0;
        },
        handleScroll() {
            const scrollTop = this.componentScrollBox.scrollTop;
            this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
            if (this.showHeader !== this.scrollTop > scrollTop) {
                this.showHeader = this.scrollTop > scrollTop;
            }
            if (scrollTop === 0) {
                this.showHeader = true;
            }
            this.scrollTop = scrollTop;
        }
    },
    beforeDestroy() {
        this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
    }
};

</script>
<style>
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

#app {
    height: 100%;
    overflow-y: hidden;
}

.page-component__scroll {
    height: 100%;
}

.page-component__scroll .el-scrollbar__wrap {
    overflow: auto;
}

.tal {
    text-align: left;
}

.router-view {
    min-height: 600px;
}

.header .el-menu--horizontal {
    border-bottom: none;
}

.footer .el-button span {
    color: #fff;
}

.footer .el-icon-phone-outline,
.footer .el-icon-message {
    color: #fff;
}







/*videojs*/

.video-player-box .video-js {
    width: 100%;
    min-height: 480px;
}

.vjs-custom-skin>.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1.5em;
    margin-top: -1em;
    background-color: rgba(0, 0, 0, .45);
    font-size: 3.5em;
    height: 2em!important;
    line-height: 2em!important;
    margin-top: -1em!important;
}

.vjs-paused.vjs-has-started.vjs-custom-skin>.video-js .vjs-big-play-button,
.video-js.vjs-ended .vjs-big-play-button,
.video-js.vjs-paused .vjs-big-play-button {
    display: block
}

.video-card .poster {
    transition: all .5s linear;
}

.video-card:hover .poster {
    transform: scale(1.03);
}


/*询价器*/

.search-btn {
    width: 120px;
    position: fixed;
    bottom: 60px;
    right: 10px;
    transition: all .3s ease-in-out;
}
.search-btn:hover{
    transform: translateX(-10px);
}
.datas .el-input__inner {
    color: #ff0000!important;
}

.page-component-up {
    background-color: #fff;
    position: fixed;
    width: 120px;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: .3s;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    z-index: 5;
}

.page-component-up i {
    color: #409EFF;
    display: block;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
}

.page-component-up i.hover {
    opacity: 1;
}

.back-top-fade-enter,
.back-top-fade-leave-active {
    transform: translateX(30px);
    opacity: 0;
}


/*自定义组件样式*/
.breadcrumb{
    font-size: 18px!important;
    margin: 15px 0;
}
.x-paginations{
    text-align: center;
}
.x-paginations .number.active{
    color: #409EFF;
    font-size: 16px;
}

#newsDetail .news-content *{
    white-space: pre-wrap;
    max-width: 100%;
}

#index .new-per:after{
    content: '最新';
    color: #00c08c;
    font-size: 12px;
    border-radius: 5px;/*设置圆角*/
    position: relative;
    z-index: 1000;
    right: 10px;
    top: -7px;
    animation: flash 1s linear infinite;
    -webkit-animation: flash 1s linear infinite;
}
@keyframes flash{
    0%{
        color: #00c08c;
    }
    100%{
        color: #f23030;
    }
}
@-webkit-keyframes flash{
    0%{
        color: #00c08c;
    }
    100%{
        color: #f23030;
    }
}

</style>
